.react-h5-calendar {
  * {
    box-sizing: border-box;
    user-select: none;
  }
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 10px;
  overflow: hidden;
  font-size: 14px;
  background-color: #fff;
  .calendar-operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 30px;
      img {
        width: auto;
        height: 16px;
      }
      &.left-icon {
        transform: rotate(180deg);
      }
    }
  }
  .calendar-head {
    display: flex;
    flex-flow: row nowrap;
    background: #fff;
    .head-cell {
      display: flex;
      flex-basis: 14.28571%;
      align-items: center;
      justify-content: center;
      height: 34px;
    }
  }
  .calendar-body {
    position: relative;
    height: 216px;
    transition: height 0.3s;
    &.week-mode {
      height: 36px;
    }
    .month-cell {
      position: absolute;
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: center;
      width: 100%;
      will-change: transform;
      .day-cell {
        display: flex;
        flex-basis: 14.28571%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 36px;
        &.is-other-month-day {
          color: #999;
        }
        .day-text {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
        }
        .current-day {
          color: #fff;
          background: #4378be;
          border-radius: 50%;
        }
        .circle-mark {
          border: 1px solid #4378be;
          border-radius: 50%;
        }
        .dot-mark {
          width: 4px;
          height: 4px;
          background-color: #4378be;
          border-radius: 50%;
        }
      }
    }
  }
  .bottom-operate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    img {
      width: auto;
      height: 16px;
      &.top {
        transform: rotate(180deg);
      }
    }
  }
}
